<template>
	<view>
		<view class="cell-box" v-for="(item,index) in clients" :key="index">
			<!-- :data-index: 这是一个自定义数据属性。data-index 属性通过 Vue 的绑定将 index 值绑定到每个事件对象上。通过这种方式，你可以在事件处理函数中识别点击的是哪个具体的项目。-->
			<!-- 你可以使用 event.target 或 event.currentTarget 获取被点击元素的信息，并通过 dataset 读取 data-index：" 通过索引获取当前选中的对象e.currentTarget.dataset.index-->
 
			<view class="weui-cell" @click="onClientSelected" :data-index="index">
			<view class="weui-cell__bd">
				<view>	
				  <text style="font-weight: bold;">{{item.name}}</text>
				</view>
				<view>
					<text :class="'sex'+ item.sex">{{item.sex == 1? '男': '女'}}</text>
					<text style="margin-left: 10rpx;">{{item.age}}</text>
					<text style="margin-left: 10rpx;">{{item.mobile}}</text>
				</view>
			</view>
			<view class="weui-cell__ft">
				<text
				v-if="act=='select'"
				class="text-sel"
				>选择</text>
				<text v-else
				
				class="text-remove"
				>移除</text>
			</view>
			</view>
		</view>
	</view>
</template>

<script setup>
  import {ref, toRaw} from 'vue'
  import {onLoad} from '@dcloudio/uni-app'
   //创建页面控制的变量 
   const act = ref('')
   const app = getApp()
   //服务对象列表
   const clients = ref([])
   onLoad((options) => {
	   act.value = options.act;
	   
	   //setNavigationBarTitle 菜单标题设置
	   if(options.act == 'select'){
		   uni.setNavigationBarTitle({
		   	title: '请选择服务对象'
		   })
		   
	   }else{
		   uni.setNavigationBarTitle({
		   	title: '服务对象管理'
		   })
	   }
	   
	   //获取服务对象信息
	   app.globalData.utils.request({
		   url:"/User/clients",
		   success: (res) => {
			   clients.value = res.data.clients
		   } 
		   
	   })
   })  
   
   //选择服务人员
   const onClientSelected = (e) =>{
	   if( act == '') return
	   const index = e.currentTarget.dataset.index
	   const clientData  = clients.value[index]
	   //clientData 是响应式数据,通过toRaw转化为元数据，则不会相互影响
	   //uni.$emit触发全局的自定义事件，附加参数都会传给监听器回调函数。
	   //然后由uni.$on 来监听该事件
	   uni.$emit('clientChange',toRaw(clientData))
	   //返回service页面
	   uni.navigateBack()
	   
   }
</script>

<style>
@import './index.css';

.text-sel {
	display: inline-block;
	padding: 15rpx 30rpx;
	border: 1rpx solid #0bb584;
	color: #0bb584;
	font-weight: bold;
	border-radius: 10rpx;
	font-size: 28rpx;
	overflow: hidden;
}

.text-remove{
	display: inline-block;
	padding: 15rpx 30rpx;
	border: 1rpx solid #eeeeee;
	color: #f13e6d;
	border-radius: 10rpx;
	font-size: 28rpx;
	overflow: hidden;
}
</style>
